<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="box"></div>

    <script>
        const oBox=document.getElementById('box')
        // // 获取mousemove事件的间隔时间
        // let lastTime= 0;
        // oBox.onmousemove=function(){
        //     const nowTime=Date.now();
        //     console.log(nowTime-lastTime);
        //      //当函数执行完成的时候,把当前的事件修改为上一次的事件
        //      lastTime=nowTime;
        // }

        //基础节流(事件的触发频率和事件函数的触发频率是不能修改的,我们节流只能从 事件函数的核心代码执行频率下手)
        // let lastTime=0;
        // oBox.onmousemove=function(){
        //     const nowTime=Date.now();
        //     // 看门狗
        //     if(nowTime-lastTime<100){
        //         return
        //     }
        //     // 当函数执行完成的时候,把当前的事件修改为上一次的事件
        //      lastTime=nowTime;
        //     //  核心代码
        //     console.log('核心代码');
        // }


        // 封装节流函数
        function throttle(fn,time){
            let lastTime=0;
            // 返回的这个函数才是正真的事件回调函数
            return function (e){
                // 看门狗
                const nowTime=Date.now();
                if(nowTime-lastTime<time){
                    return
                }
                lastTime=nowTime
                // 看门狗通过后，调用核心
                fn.call(this,e);
            }
        }
        // 核心代码
        function center(e){
            console.log('核心代码');
            console.log(e);
            console.log(this);
        }
        oBox.onmousemove=throttle(center,100);
    </script>
</body>
</html>